<template>
  <div>
      <x-input title="search" placeholder="输入商家名称" type="text" name="search" @on-focus="onFocus" v-model="inputval"  @on-enter="onEnter" @on-change="onChange" ref="search">
        <i class="icon-search" slot="label"></i>
        <!-- <a href="javascript:void(0)" slot="right" v-show="isCancel" style="color:#727272;font-size:.46rem;vertical-align:middle;padding-right:.5rem;" @click="onCalcel">取消</a> -->
      </x-input>
      <!-- <a href="javascript:void(0)" slot="right" v-show="isCancel" style="color:#727272;font-size:.46rem;vertical-align:middle; position:absolute;top:35%;right:3%;" @click="onCalcel">取消</a> -->
  </div>
</template>

<script>
import { XInput } from 'vux'
export default {
  components: {
    XInput
  },
  data () {
    return {
      inputval: '',
      isCancel: false
    }
  },
  mounted(){
    // console.log(this.$route.path.indexOf('search'))
    if(this.$route.path.indexOf('search') !== -1){
      this.$nextTick(()=>{
        // console.log(this.$refs.search)
        this.$refs.search.focus()
      })
    }
  },
  methods: {
    onFocus (val, $event) {
      // 触发焦点事件
      this.$emit('focusTip', val, $event)
      this.isCancel = true
    },
    onCalcel ($event) {
      // 取消按钮事件
      this.$emit('cancelTip', $event)
      this.inputval = ''
      this.isCancel = false
      this.$router.go(-1)
    },
    onChange (val) {
      this.$emit('changeTip',val)
    },
    onEnter (val) {
      // 把值传递给父组件
      this.$emit('enterTip',val)
    }
  }
}
</script>
